<template>
  <div id="cpn-search-field">
    <el-form :model="form" :inline="true" class="search-bar">
      <slot></slot>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import { reactive } from 'vue'

const props = defineProps(['form'])

const emit = defineEmits(['search', 'reset'])

const defaultForm = reactive({ ...props.form })

const onSearch = () => {
  emit('search', { ...props.form })
}

const onReset = () => {
  Object.assign(props.form, defaultForm)
  emit('reset')
};

</script>

<style lang='scss' scoped>
#cpn-search-field {
  .search-bar {
    display: flex;
    align-items: center;
  }
}
</style>